<template>
	<div id="order">
	     <!-- 导航栏 -->
	     <van-nav-bar
			  title="填写订单"
			  left-arrow
			  :fixed=true
              :border=true
			  @click-left="onClickLeft"
			></van-nav-bar>


          

           <van-cell-group v-if="time" style="margin-top: 3rem">
			   <van-cell title="请选择鲜活蔬菜送达时间"   @click="showStartTime()" v-model="startTime"  is-link/>
			    <van-popup 
		     		v-model="showStart" 
			    	position="bottom" 
			        :style="{ height: '40%' }">
		        <van-datetime-picker 
			        v-model="startTime" 
			        type="time" 
			        :min-hour="minhours"
				    @confirm="confirmStartFn()" 
		            @cancel="cancelFn()" />
		       </van-popup>
			   <van-cell title="订单详情" value="内容" is-link/>
			</van-cell-group> 
		     <van-cell-group v-else style="margin-top: 3rem">
			   <van-cell title="订单详情" value="内容" is-link/>
			</van-cell-group>


			<van-cell-group  style="margin-top: 0.6rem">
			   <van-cell title="支付方式" value="微信" is-link/>
			</van-cell-group>

			<van-cell-group  style="margin-top: 0.6rem">
			   <van-cell title="备注">
                  <input type="text" v-model="beizhu" placeholder="选填，备注您的特殊需求!">
			   </van-cell>
			</van-cell-group>

			<van-cell-group  style="margin-top: 0.6rem">
			   <van-cell title="商品金额" >{{this.$route.params.totalPrice}}</van-cell>
              <van-cell title="会员价">{{this.$route.params.totalPrice*0.8}}</van-cell>
			   <van-cell title="积分抵扣">{{this.$route.params.totalPrice}}</van-cell>
			</van-cell-group>

			<van-notice-bar wrapable :scrollable="false">
			   *一般蔬菜商品每天15点前下单，16点前送达，超过15点下的订单将于第二天16点前送达；鲜活类蔬菜商品于当天在您选择的送达时间内送达，最快1小时后送达。
			</van-notice-bar>
           <van-submit-bar
			  :price="3050"
			  button-text="提交订单"
			  label="实付:"
			  @submit="queren"
			/>
	       <transition name="router-slider" mode="out-in">
	          <router-view></router-view>
           </transition>
	</div>
</template>

<script>
import { Dialog } from 'vant'
import {mapState,mapMutations} from "vuex"
import { DatetimePicker, NoticeBar } from 'vant'
 import {createyzfOrder,createwzfOrder,createdOrderDetail} from './../../service/api/index'
	export default{
		name:"Order", 
		data(){
            return {
            	show:false, 
                beizhu:'',
                startValue: '请选择鲜活蔬菜送达时间',//输入框默认值
			    startTime: '',// 开始时间
			    showStart: false, // 用来显示弹出层
			    time:false //鲜活类蔬菜送达时间选择的显示
            }
		},

		 computed:{
              ...mapState(['shopCart','userInfo']),
             
              minhours(){
             	return  (new Date()).getHours()+1;
             }

         },
		mounted(){
			// console.log(this.$route.params.totalPrice);
		// 	//this.sumprice;
	  //  console.log("sda");
			// let shopCart = this.shopCart;
			// console.log(shopCart);
		// 	 Object.values(shopCart).forEach((goods,index)=>{
  //                   //遍历shopCart对象里面值(一条购物车信息)组成的数组，sumpeice=0,判断每条购物车信息的checkd值是不是true,是的话sumprice=num*price,不是的话sumprice=sumprice+0
  //                    if (goods.checked="true") {   
  //                          this.sumprice = 0+goods.num*goods.price;
  //                    }else{
  //                         this.sumprice = 0+this.sumprice;
  //                    }
		// 	 })
		// 	 判断订单中是否包含鲜活类蔬菜，有鲜活蔬菜显示选择送达时间
	         let shopCart = this.shopCart;
		    Object.values(shopCart).forEach((goods,index)=>{
                 //console.log(goods);
                  if (goods.checked===1&&goods.pzleixing===2) {
                  	 this.time = true;
                  }
		    })
		},
		methods:{
			 ...mapMutations(["DELETE_CART"]),  //拿到mutations.js  里面的REDUCE_CART方法,记得先导入
			//点击了左边
            onClickLeft(){
                this.$router.back();
            },
             //点击提交订单，弹框提示'支付成功'随后跳转到支付成功页面,
                 queren(){
                 	Dialog.confirm({
					  message: '你正在使用微信支付，是否继续支付？'
					}).then(async () => {
                          //成功支付,入库操作，生成已经支付的订单表，订单表状态status=1(已付款状态)，跳转到支付成功页面
					      let result = await createyzfOrder(this.userInfo.token,this.beizhu,this.$route.params.totalPrice,this.startValue);
                          console.log(result);
                         if (result.status==='200') {
                               //创建订单详情表，将选中商品移除购物车表
                               // console.log(result.bianhao);
                               let res = await createdOrderDetail(result.bianhao);
                                console.log(res);
                                 if (res.status==='200') {
                                  //同步本地数据
                                  //console.log(this.shopCart);
                                   Object.values(this.shopCart).forEach((goods,index)=>{
                                   	      let goodsId=goods.id;
                                           if (goods.checked===1) {
                                                this.DELETE_CART({goodsId});
                                           }
                                   });
                                  //跳转到支付成功页面
                                     this.$router.push({ name: 'success',params:{bianhao:result.bianhao,totalPrice:this.$route.params.totalPrice} });
                                 }             
                         }
					}).catch(async () => {
						//取消支付,入库操作，生成未付款的订单表和订单详情表，订单表状态status=-1(未付款状态)，跳转到待付款订单页面
					    // console.log("已取消支付");
					     let resultw = await createwzfOrder(this.userInfo.token,this.beizhu,this.$route.params.totalPrice,this.startValue);
                         console.log(resultw);                        
                          if (resultw.status==='200') {
                              //创建订单详情表，将选中商品移除购物车表
                              // console.log(result.bianhao);
                             let res = await createdOrderDetail(resultw.bianhao);
                             console.log(res);
	                           if(res.status==='200'){
	                               //同步本地数据
	                                //console.log(this.shopCart);
	                               Object.values(this.shopCart).forEach((goods,index)=>{
	                           	      let goodsId=goods.id;
		                                   if (goods.checked===1) {
		                                        this.DELETE_CART({goodsId});
		                                    }
	                                  });
	                                  //跳转到未付款订单列表页面
                              
                                 }       
                          }                   
                        
					});
                 },

                showStartTime() {
					   this.showStart = true;
			     },
			    confirmStartFn() { // 确定按钮
                      // console.log(this.startTime);
					    this.startValue = this.startTime;
					    this.showStart = false;
			     },
			    cancelFn(){
					   this.showStart = false;
				},

		},

	}
</script>

<style scoped>
    #order{
    	width:100%;
    	height:100%;
    	background-color:#f5f5f5;
    }
    
    .router-slider-enter-active,.router-slider-leave-active{
    	transition:all 0.3s;
    }

    .router-slider-enter,.router-slider-leave-active{
    	transform:translate3d(2rem,0,0);
    	opacity:0;
    }


</style>